const path = require('path');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 引入自定义webpack插件myPlugin(打包后额外生成一个license文件)
const MyPlugin = require('../src/plugins/myPlugin.js')

module.exports = {
	mode: 'production', // development、production
	entry: {
		loader: './src/entrys/entry_loader.js',
		plugin: './src/entrys/entry_plugin.js'
	},
	output: {
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, '../dists/loaderPlugin')
	},
	devtool: 'inline-source-map', //明确指出运行时的报错文件，(由打包后的bundle.js映射的源文件)
	plugins: [
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: true // true清理所有文件， false只删除变动过的文件(如执行 npm run watch时dist下的index.html时没有改变的，不需要删除)
		}), // 每次打包前删除dist文件夹
		new HtmlWebpackPlugin({
			title: 'test loader',
			filename: 'index.html',
			// chunks: ['app', 'print'], // 需要引入的chunks，不配置chunks属性时默认加载entry下所有chunks文件
			// template: 'index.html',
			inject: true, // true | body | head |false 四种选项； true|body: 所有JavaScript资源插入到body元素的底部；head: 所有JavaScript资源插入到head元素中。；所有静态资源css和JavaScript都不会注入到模板文件中,一般需要自定义模板配置的时候使用。
			// favicon: path.join(__dirname, '..', 'favicon.ico')
		}),
		// 引入自定义插件
		new MyPlugin({text: `test myPlugin${new  Date()}`})
	],
	optimization: {
		usedExports: true, // tree shaking 只打包页面用到的模块内容
        splitChunks: {	// 提取公共模块部分，代码分隔
            chunks: 'all',
            name:'manifest'
        }
    },
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			},
			{// 自定义loader
				test: /\.js$/,
				use: [
					// path.resolve(__dirname, '../loaders/myLoader.js')
					{
						loader: path.resolve(__dirname, '../src/loaders/myLoader.js'),
						options: {
							log: 'hello loader'
						}
					}
				],
				include: path.resolve(__dirname, '../src'), // 精确指定要处理的目录
				exclude: /node_modules/
			}
		]
	},
	resolve: {
		extensions: ['.js', '.css', '.json']  //自动解析确定的扩展。默认值为：
	},
	resolveLoader: {
		modules: ['./node_modules', '../src/loaders'] // 配置loader的查找目录
	}
};